<template>
	<view class="container">
		<view>
			<view class="top">
				<text>{{ $t('login.title') }}</text>
			</view>
			<view class="info">
				<image class="icon" src="../../static/images/login/name.png" mode=""></image>
				<input v-model="form.nick_name" type="text" value="" :placeholder="$t('login.phone')" placeholder-style="color:rgb(194,190,190);font-size:14px;" />
			</view>
			<view class="info">
				<image class="icon" src="../../static/images/login/pwd.png" mode=""></image>
				<input v-model="form.login_pwd" type="password" value="" :placeholder="$t('login.pwd')" placeholder-style="color:rgb(194,190,190);font-size:14px;" />
			</view>
			<view class="loginBtn" style="backgroundImage: url(../../static/images/login/loginBtn.png);" @click="handleLogin()">{{ $t('login.signIn') }}</view>
			<view class="opration">
				<navigator url="/pages/register/index">{{ $t('register.signUp') }}</navigator>
				｜
				<navigator url="/pages/login/subpage/forget/index">{{ $t('login.forgot') }}</navigator>
			</view>
		</view>
	</view>
</template>
<script>
import context from '../../main.js';
import { uniIcons } from '@dcloudio/uni-ui';
import ZLoginButton from './components/ZLoginButton.vue';
import fetch from '@/common/fetch.js';
import common from '@/mixin/common.js';
export default {
	components: {
		uniIcons,
		ZLoginButton
	},
	mixins: [common],
	data: () => ({
		isLookOnPw: true,
		checkbox: [
			{
				checked: true,
				value: '记住密码' //this.$t('login.remenberMe')
			}
		],
		form: {
			nick_name: '',
			login_pwd: ''
		},
		info: {
			nick_name: context.$t('login.phoneToast'),
			login_pwd: context.$t('login.pwdToast')
		}
	}),
	computed: {
		lookPw() {
			return this.isLookOnPw ? 'rgb(204, 204, 204)' : 'white';
		},
		hasNickName() {
			return this.form.nick_name.length > 0;
		}
	},
	mounted() {
		uni.getStorage({
			key: 'Logininfo',
			success: res => {
				this.form = res.data;
			}
		});
	},
	methods: {
		handleLogin() {
			if (this.vaild(this.form, this.info)) {
				fetch.request('/index/index/doLogin', this.form, 'POST').then(res => {
					console.log(res);
					if (res.code === 0 || res.code === '0') {
						if (this.checkbox[0].checked) {
							uni.setStorageSync('Logininfo', this.form);
						} else {
							try {
								uni.removeStorageSync('Logininfo');
							} catch (e) {
								// error
							}
						}
						uni.setStorageSync('token', res.data.token);
						uni.showToast({
							title: this.$t('login.success'),
							icon: 'none',
							duration: 2000
						});
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/index/index'
							});
						}, 2100);
					} else {
						uni.showToast({
							title: res.msg, //其实是error,为了不展示给用户
							icon: 'none',
							duration: 2000
						});
					}
				});
			}
		},
		checkboxChange(e) {
			let items = this.checkbox,
				values = e.detail.value;
			for (let i = 0, lenI = items.length; i < lenI; ++i) {
				const item = items[i];
				if (values.includes(item.value)) {
					this.$set(item, 'checked', true);
				} else {
					this.$set(item, 'checked', false);
				}
			}
		}
	}
};
</script>

<style scoped>
.container {
	top: constant(safe-area-inset-top);
	top: env(safe-area-inset-top);
}
.top {
	width: 100%;
	height: 230px;
	background-image: url(../../static/images/login/top.png);
	background-size: 100% 100%;
	text-align: center;
}

.top > text {
	line-height: 230px;
	color: #ffffff;
	font-size: 20px;
	z-index: 10;
}
.info {
	margin: 60px 40px 30px 40px;
	padding-bottom: 5px;
	width: 80%;
	display: flex;
	flex-direction: row;
	justify-content: left;
	align-items: center;
	border-bottom: solid 1px whitesmoke;
}
.info > .icon {
	width: 12px;
	height: 12px;
	margin-right: 10px;
}
.info > input {
	width: 100%;
	height: 12px;
	margin-right: 10px;
}
.loginBtn {
	background-image: url(../../static/images/login/loginBtn.png);
	background-size: 100% 100%;
	height: 40px;
	line-height: 40px;
	color: white;
	font-size: 20px;
	text-align: center;
	margin: 40px;
}
.loginBtn > image {
	height: 40px;
}
.opration {
	display: flex;
	flex-direction: row;
	justify-content: center;
	font-size: 14px;
	color: rgb(194, 190, 190);
}
</style>
